<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>4-进度条</title>
		<!-- 导入css样式 -->
		<link href="../../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../../lib/js/bootstrap.min.js" ></script>
	</head>
	<body>
		
	<!-- 动画进度条 -->
	<div id="pgID" style="display: none;" class="col-md-5">
		<div class="progress progress-striped active" >
		    <div id="pgBar" class="progress-bar progress-bar-success" role="progressbar"
		         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		         style="width: 90%;">
		        <span id="pdNum" class="sr-only">40% 完成</span>
		    </div>
		</div>
	</div>
	<button onclick="openProgess();">打开进度条</button>	
	<button onclick="closeProgess();">关闭进度条</button>
	<script>
		var tpd = 0;
		var t = 0;
		function openProgess(){
			var modalHeight=$(window).height() / 2 - $('#pgID').height() / 2; 
			$("#pgID").css({"display":"block","margin":modalHeight});
			//定时任务请求返回
			randomPd();
			t = setInterval("randomPd()",1000);
		}
		
		function closeProgess(){
			$("#pgID").css({"display":"none"});
			$("#pgBar").css({"width":"0%"});
			clearInterval(t);
			t = 0;
			tpd = 0;
		}
		
		function randomPd(){
			var num = Math.round(Math.random(1)*10);
			tpd = tpd+num; 
			var percent = tpd+"%"
			if(tpd < 100){
				console.log(percent+","+t);
				$("#pgBar").css({"width":percent});
			}else{
				clearInterval(t);
				$("#pgBar").css({"width":"100%"});
			}
		}
		
		/** 开始定时 */
		function startPD(){
			tpd = setInterval('setPDValue()',1000);
		}
		
		/* 停止定时 */
		function stopPD(){
			clearInterval(tpd);
			tpd = 0;
		}
		
		/**
		 * 调用ajax获得进度值
		 */
		function setPDValue(){
			$.ajax({
				url:'',
				type:'post',
				data:{'time':new Date()},
				dataType:'json',
				cache:"false",
				async:"true",
				success:function(data){
					var num = parseInt(data.PDNUM);
					if(num > 100){
						stopPD();//停止定时
						closeProgess();//关闭进度框
						window.location.reload();
					}
					$("#pgBar").css({"width":"'"+num+"%'"});
						
				},
				error:function(){
					//系统错误,请刷新后重试!
					
				}
				
			});
		}
		
	</script>	
		
	</body>
</html>
